{% extends 'base.html' %}
{% load static %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- 返回按钮 -->
            <a href="{% url 'location:redemption_history' %}" class="btn btn-outline-secondary mb-4">
                <i class="fas fa-arrow-left me-2"></i>返回记录
            </a>

            <div class="card shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="mb-0">兑换详情</h5>
                </div>
                <div class="card-body">
                    <!-- 基本信息 -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h6 class="text-muted">商品信息</h6>
                            <h5>{{ redemption.reward.name }}</h5>
                            <p class="text-muted">{{ redemption.reward.description }}</p>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-muted">兑换状态</h6>
                            <span class="badge
                                {% if redemption.status == 'completed' %}bg-success
                                {% elif redemption.status == 'cancelled' %}bg-danger
                                {% else %}bg-warning{% endif %} fs-6">
                                {{ redemption.get_status_display }}
                            </span>
                        </div>
                    </div>

                    <!-- 详细信息 -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <strong><i class="fas fa-coins me-2 text-warning"></i>消耗积分</strong>
                            <div class="h5 text-primary">{{ redemption.points_used }}</div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <strong><i class="fas fa-clock me-2 text-info"></i>兑换时间</strong>
                            <div>{{ redemption.redemption_time|date:"Y-m-d H:i" }}</div>
                        </div>
                    </div>

                    <!-- 商品类型 -->
                    <div class="row">
                        <div class="col-12 mb-3">
                            <strong><i class="fas fa-tag me-2 text-success"></i>商品类型</strong>
                            <div>
                                <span class="badge
                                    {% if redemption.reward.reward_type == 'coupon' %}bg-warning
                                    {% elif redemption.reward.reward_type == 'privilege' %}bg-info
                                    {% else %}bg-success{% endif %}">
                                    {{ redemption.reward.get_reward_type_display }}
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- 状态说明 -->
                    <div class="alert
                        {% if redemption.status == 'completed' %}alert-success
                        {% elif redemption.status == 'cancelled' %}alert-danger
                        {% else %}alert-warning{% endif %} mt-4">
                        <h6><i class="fas fa-info-circle me-2"></i>
                            {% if redemption.status == 'pending' %}待处理
                            {% elif redemption.status == 'completed' %}已完成
                            {% elif redemption.status == 'cancelled' %}已取消
                            {% endif %}
                        </h6>
                        <p class="mb-0">
                            {% if redemption.status == 'pending' %}
                            您的兑换申请已提交，请等待管理员处理。实物商品将在3-5个工作日内发货，虚拟商品将在24小时内发放。
                            {% elif redemption.status == 'completed' %}
                            兑换已完成！{% if redemption.reward.reward_type == 'physical' %}商品已发货。{% else %}商品已发放。{% endif %}
                            {% elif redemption.status == 'cancelled' %}
                            该兑换已被取消。
                            {% endif %}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}